<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>DOM</title>
        <script>
            function changeElement() {
                var ele = document.getElementById("textInputer");
                ele.value = "不 你不是";
                ele.type = "button";
                ele.style.color = "green";
                ele.style.border = "2px solid red";
                ele.style.borderRadius = "5px";
            }
            function changeContent() {
                var ele = document.getElementById("div1");
                // innerHTML innerContent textContent 都可以改变文本
                // 其中 innerHTML 可以解析 HTML 标签 其他两个不行
                ele.innerHTML = "<h1>我可能不是？</h1>";
                window.setTimeout(() => {
                    ele.remove();
                }, 1000);
                
            }
        </script>
    </head>
    <body>
        <input
            type="text"
            value="这是一个输入框"
            id="textInputer"
            name="textInputer"
            style="color: red"
        />
        <div id="div1">我是一个块</div>

        <hr />
        <button onclick="changeElement()">大变活人</button>
        <button onclick="changeContent()">大变活块</button>
    </body>
</html>
